<template>
	<view class="">
		<!-- https://marketing.ediblefungus.cn/dist/h5XKLJ/index.html#/ -->
		<web-view src="https://marketing.xiaokanglongjiang.com/h5XKLJ/index.html"></web-view>
		<!-- <tabsTop tabName="合美供销云平台"></tabsTop>
		<view class="px-2">
			每日推荐tab选项卡
			顶部导航栏
			<view class="horizonal-tab flex justify-between my-2 px-5">
				<view v-for="(item,index) in tabBars" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
						<view class="mb-2">{{item.name}}</view>
						<view class="scroll-tab-line"></view>
					</view>
				</view>
			</view>
		</view>
		内容区
		<view>
			滑块视图
			<swiper :current="tabIndex" @change="tabChange" style="height: 910rpx;padding-bottom: 200rpx;">
				current:当前所在滑块的index
				<swiper-item v-for="(content,index) in contentList" :key="index" class="con" style="height: 600rpx;">
					采购大厅Trade
					<view v-if="index==0" class="trade">
						<view class="content">
							<scroll-view style="width: 100%;position: fixed;top: 0;z-index: 100;"
								class="scroll-view_H outer-scroll-view" scroll-x="true" scroll-left="120"
								:show-scrollbar="false">
								<view v-for="(item, index) in category"
									@click="SwitchVariety(index, item.Category_SerialNumber)" :key="index"
									:class="{ active: activeIndex === index }" class="scroll-view-item_H uni-bg-red">
									{{ item.Category_Name }}
								</view>
							</scroll-view>
							<view v-if="tableData.length == 0"
								class="cont  justify-center  flex align-center zanw mt-10" style="height: 100vh;">
								<text>
									暂无该类数据
								</text>
							</view>
							<view v-else class="cont mt-10" style="height: 200%;">
								<view class="item" v-for="(item, index) in tableData" :key="index" @click="
									handleTabs(
										item.Group_Seek_Purchase_SerialNumber,
										item.Enterprise_Info_SerialNumber
									)
									">
									<view class="title">{{ item.Article_Name }}</view>
									<view class="jg">{{ item.Amount }}{{ item.Unit?item.Unit:"吨" }}</view>
									<view class="cont2">
										<view class="left">
											<view>发布人:{{ item.Contacts }} </view>
											<view>所属企业 :{{ item.Enterprise_Name }} </view>
										</view>
										<view class="right"> 查看详情 </view>
									</view>
								</view>
								<view class="text-center font-sm">{{ loadingText }}</view>
							</view>
							<view v-if="tag" @click="goTop" class="bg-white flex  align-center"
								style="width: 120rpx;height: 120rpx;border-radius: 50%;box-shadow: 0 0 15rpx rgba(0,0,0,.5);position: fixed;right: 80rpx;bottom: 80rpx;justify-content: center;">
								<image style="height: 80%;width: 80%;"
									src="https://digital.essc.top/dist/zjl_icon/gotop.png" mode=""></image>
							</view>
						</view>
					</view>
					供应大厅Market
					<view v-if="index==1" class="market">
						<view class="content">
							<scroll-view style="width: 100%;position: fixed;top: 0;z-index: 100;"
								class="scroll-view_H outer-scroll-view" scroll-x="true" scroll-left="120"
								:show-scrollbar="false">
								<view v-for="(item, index) in mcategory"
									@click="mSwitchVariety(index, item.Category_SerialNumber)" :key="index"
									:class="{ active: mactiveIndex === index }" class="scroll-view-item_H uni-bg-red"
									style="cursor: pointer">{{
										item.Category_Name }}</view>
							</scroll-view>
							<view v-if="mtableData.length == 0"
								class="cont  justify-center  flex align-center zanw mt-10" style="height: 100vh;">
								<text>
									暂无该类数据
								</text>
							</view>
							<view class="cont mt-10" v-else style="height: 200%;">
								<view class="item" v-for="(item, index) in mtableData" :key="index" @click="
									mhandleTabs(
										item.Group_Purchasing_SerialNumber,
										item.Enterprise_Info_SerialNumber
									)
									">
									<view class="leftimg">
										<image :src="Domain_IMG + item.Picture_URL" mode="scaleToFill" />
									</view>
									<view class="right">
										<view class="title">{{ item.Article_Name }}</view>
										<view class="jg">{{ item.Total_Quantity + "/" + item.Unit }}</view>
										<view class="fl">{{ item.Category_Name }}</view>
										<view class="cont2">
											<view class="left">
												<view>发布人:{{ item.Contacts }} </view>
												<view>所属企业 :{{ item.Enterprise_Name }} </view>
											</view>
										</view>
										<view class="but"> 查看详情 </view>
									</view>
								</view>
								<view class="text-center font-sm">{{ mloadingText }}</view>
							</view>
							<view v-if="mtag" @click="mgoTop" class="bg-white flex  align-center"
								style="width: 120rpx;height: 120rpx;border-radius: 50%;box-shadow: 0 0 15rpx rgba(0,0,0,.5);position: fixed;right: 80rpx;bottom: 80rpx;justify-content: center;">
								<image style="height: 80%;width: 80%;"
									src="https://digital.essc.top/dist/zjl_icon/gotop.png" mode=""></image>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<tabsBottom></tabsBottom>-->
	</view>

</template>

<script>
	import {
		getUserAllFQ
	} from "@/api/traceability.js";
	import {
		GoodsFileInquiry
	} from "@/api/global.js";
	import {
		GroupSeekProcureAll,
		GroupSeekProcureAllAction,
		GroupProcureAll,
		GroupProcureAllAction
	} from "../../api/group.js";
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	export default {
		components: {
			tabsTop,
			tabsBottom,
		},
		data() {
			return {
				contentList: [
					"采购大厅",
					"供应大厅",
				],
				tabBars: [{
						name: '采购大厅',
						id: '0'
					},
					{
						name: '供应大厅',
						id: '1'
					}
				],
				tableData: [],
				tabIndex: 0,
				loadingText: '向下拉取加载更多',
				activeIndex: 0,
				Domain_Business: app.globalData.Domain_Business,
				ThemeColors: app.globalData.ThemeColors,
				form: {
					page: 1, //页数
					limit: 5, //每页数据条数
					User_Type: "",
				},
				total: 0,
				category: [
					//用户专区分类筛选
				],
				form: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					page: 1, //页数
					limit: 10, //每页数据条数
				},
				timer: null,
				scrollTop: 0,
				tag: false,
				mactiveIndex: 0,
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_Business: app.globalData.Domain_Business,
				ThemeColors: app.globalData.ThemeColors,
				mform: {
					page: 1, //页数
					limit: 5, //每页数据条数
					User_Type: "",
				},
				mtableData: [],
				mtotal: 0,
				mcategory: [
					//用户专区分类筛选
				],
				mform: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					page: 1, //页数
					limit: 5, //每页数据条数
				},
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		watch: {
			scrollTop: function(newValue, oldValue) {
				if (newValue > 800) {
					this.tag = true
				} else {
					this.tag = false
				}
			},
		},
		onLoad() {
			this.tableData = []
			this.getList();
			this.getData(this.form);
			this.mtableData = []
			this.mgetList();
			this.mgetData(this.form);
		},
		onReachBottom() {
			if (this.loadingText != '没有更多了') {
				this.form.page++
				this.throttling();
			}
		},
		methods: {
			//滑动切换swiper
			tabChange(e) {
				this.tabIndex = e.detail.current;
			},
			//切换选项卡
			toggleTab(index) {
				console.log(index);
				this.tabIndex = index;
			},
			async getList() {
				//类别
				const res = await GoodsFileInquiry({
					Data: "category",
				});
				this.category.unshift({
					Category_Name: "全部",
					Category_SerialNumber: "",
				});
				this.category.push(...res);
			},
			throttling(delay = 500) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.getData(this.form)
				}, delay)
			},
			handleTabs(Group_Seek_Purchase_SerialNumber, Enterprise_Info_SerialNumber) {
				//跳转
				uni.navigateTo({
					url: "/pages/SupplyAndMarketing/Trade/Tradedetails?Group_Seek_Purchase_SerialNumber=" +
						Group_Seek_Purchase_SerialNumber +
						"&Enterprise_Info_SerialNumber=" +
						Enterprise_Info_SerialNumber,
				});
			},
			SwitchVariety(i, e) {
				//切换品种
				if (this.form.Category_SerialNumber == e) {
					//重复点击不允许调接口
					return;
				}
				this.goTop()
				this.tableData = []
				this.activeIndex = i;
				this.form.Category_SerialNumber = e;
				this.form.page = 1;
				this.getData(this.form);
			},
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			async getData(data) {
				//分页查询所有采购交易
				uni.showLoading({
					title: '加载中...'
				})
				this.loadingText = '加载中...'

				// const res = await GroupSeekProcureAllAction(data);
				const res = await GroupSeekProcureAll(data);
				console.log(res, '未登录');
				uni.hideLoading()
				if (
					(res.redirect && res.redirect == "REDIRECT") ||
					(res.REDIRECT && res.REDIRECT == "REDIRECT")
				) {
					uni.removeStorageSync("token");
					console.log(res, '数据');
					const res = await GroupSeekProcureAll(data);
					console.log(res, '数据');
					if (res.Status == "success") {
						this.tableData.push(...res.tableData)
						this.loading = false;
						this.total = Number(res.limit)
						console.log(res.limit)
						if (this.total == this.tableData.length) {
							this.loadingText = '没有更多了'
						} else {
							this.loadingText = '下拉加载更多'
						}
					}
				} else if (res.Status == "success") {
					this.tableData.push(...res.tableData)
					this.loading = false;
					this.total = Number(res.limit)
					if (this.total == this.tableData.length) {
						this.loadingText = '没有更多了'
					} else {
						this.loadingText = '下拉加载更多'
					}
				}
			},
			async mgetList() {
				//类别
				const res = await GoodsFileInquiry({
					Data: "category"
				});
				this.mcategory.unshift({
					Category_Name: "全部",
					Category_SerialNumber: "",
				});
				this.mcategory.push(...res);
			},
			mthrottling(delay = 500) {
				clearTimeout(this.mtimer)
				this.mtimer = setTimeout(() => {
					this.mgetData(this.mform)
				}, delay)
			},
			mhandleTabs(Group_Purchasing_SerialNumber, Enterprise_Info_SerialNumber) {
				//跳转
				uni.navigateTo({
					url: "/pages/SupplyAndMarketing/Market/MarketDetail?Group_Purchasing_SerialNumber=" +
						Group_Purchasing_SerialNumber +
						"&Enterprise_Info_SerialNumber=" +
						Enterprise_Info_SerialNumber,
				});
			},
			mSwitchVariety(i, e) {
				//切换品种
				if (this.mform.Category_SerialNumber == e) {
					//重复点击不允许调接口
					return;
				}
				this.mgoTop()
				this.mtableData = []
				this.mactiveIndex = i;
				this.mform.Category_SerialNumber = e;
				this.mform.page = 1;
				this.mgetData(this.mform);
			},
			mgoTop() {
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			async mgetData(data) {
				//分页查询所有供应数据
				uni.showLoading({
					title: '加载中...'
				})
				this.mloadingText = '加载中...'
				const res = await GroupProcureAll(data);
				uni.hideLoading()
				if (
					(res.redirect && res.redirect == "REDIRECT") ||
					(res.REDIRECT && res.REDIRECT == "REDIRECT")
				) {
					uni.removeStorageSync("token");
					const res = await GroupProcureAll(data);
					if (res.Status == "success") {
						this.mtableData.push(...res.tableData)
						this.mtotal = Number(res.limit)
						console.log(res.limit)
						if (this.mtotal == this.tableData.length) {
							this.mloadingText = '没有更多了'
						} else {
							this.mloadingText = '下拉加载更多'
						}
					}
				} else if (res.Status == "success") {
					this.mtableData.push(...res.tableData)
					this.mtotal = Number(res.limit)
					console.log(res.limit)
					if (this.mtotal == this.mtableData.length) {
						this.mloadingText = '没有更多了'
					} else {
						this.mloadingText = '下拉加载更多'
					}
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.horizonal-tab {
		color: #ccc;
	}

	.horizonal-tab .active {
		color: #000;
		height: 100%;
	}

	.scroll-tab-item {
		height: 45rpx;
		line-height: 45rpx;
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 0rpx 30rpx 0 30rpx;
	}

	.active .scroll-tab-line {
		border-bottom: 5rpx solid #30c4cc;
		border-top: 5rpx solid #30c4cc;
		border-radius: 20rpx;
		width: 100%;
		margin: 0 auto;
		color: #000;
	}

	.trade {



		.content {

			width: 100%;
			// height: calc(100vh - 94px);
			background-color: #f5f5f5;
			padding: 0 0 20rpx 0;

			.scroll-Y {
				height: 100rpx;
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				background-color: #fff;
			}

			.scroll-view-item {
				height: 100rpx;
				text-align: center;
				font-size: 36rpx;
				padding: 0 20rpx;
			}

			.scroll-view-item_H {
				display: inline-block;
				height: 100rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 36rpx;
				padding: 10rpx 36rpx;
				box-sizing: border-box;
			}

			.active {
				border-bottom: 4px solid #28a745;
				border-radius: 10rpx;
				color: #28a745;
			}

			.outer-scroll-view {
				show-scrollbar: false;
			}

			.zanw {
				font-size: 24rpx;
				border-radius: 20rpx;
				width: 100%;
			}

			.cont {
				height: calc(100vh -44px);
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #f5f5f5;

				.item {
					border-radius: 20rpx;
					background-color: #fff;
					padding: 25rpx;
					box-sizing: border-box;
					margin: 0 0 30rpx 0;

					.title {
						font-size: 34rpx;
						color: #222;
						line-height: 34rpx;
						font-weight: 500;
					}

					.jg {
						font-size: 34rpx;
						color: #ff442f;
						vertical-align: middle;
						margin-right: 20rpx;
						// flex: 0 0 auto;
						margin: 20rpx 0 20rpx;
					}

					.cont2 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							font-size: 26rpx;
							color: rgba(34, 34, 34, 0.5);
							line-height: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							view {
								margin-top: 10px;
							}
						}

						.right {
							width: 132rpx;
							height: 54rpx;
							border: 1px solid #39bf3e;
							border-radius: 28rpx;
							font-size: 26rpx;
							color: #39bf3e;
							text-align: center;
							letter-spacing: 0;
							font-weight: 500;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				// .left {
				//   image {
				//     width: 120rpx;
				//     height: 120rpx;
				//   }
				// }

				// .right {
				//   margin: 0 0 0 20rpx;
				//   padding: 20rpx;
				//   box-sizing: border-box;
				// }
			}

			.contI {
				height: calc(100vh - 50px);
				color: #222;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.market {
		.scroll-Y {
			height: 100rpx;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			background-color: #fff;
		}

		.scroll-view-item {
			height: 100rpx;
			text-align: center;
			font-size: 36rpx;
			padding: 0 20rpx;
		}

		.scroll-view-item_H {
			display: inline-block;
			height: 100rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 36rpx;
			padding: 10rpx 36rpx;
			box-sizing: border-box;
		}

		.active {
			border-bottom: 4px solid #28a745;
			border-radius: 10rpx;
			color: #28a745;
		}

		.outer-scroll-view {
			show-scrollbar: false;
		}

		.content {
			width: 100%;
			// height: calc(100vh - 94px);
			background-color: #f5f5f5;
			padding: 0 0 20rpx 0;

			.zanw {
				font-size: 24rpx;
				border-radius: 20rpx;
				width: 100%;
			}

			.cont {
				height: calc(100vh -44px);
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #f5f5f5;

				.item {
					border-radius: 20rpx;
					background-color: #fff;
					padding: 25rpx;
					box-sizing: border-box;
					margin: 0 0 30rpx 0;
					display: flex;

					// width: 60%;
					.leftimg {
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 258rpx;
							height: 258rpx;
							border-radius: 20rpx;
							margin: 0 10rpx 0 0;
						}
					}

					.right {
						width: 60%;
						padding: 10rpx;
						box-sizing: border-box;
						flex: 1;

						.fl {
							font-size: 28rpx;
						}
					}

					.title {
						font-size: 34rpx;
						color: #222;
						line-height: 34rpx;
						font-weight: 500;
					}

					.jg {
						font-size: 34rpx;
						color: #ff442f;
						vertical-align: middle;
						margin-right: 20rpx;
						// flex: 0 0 auto;
						margin: 20rpx 0 20rpx;
					}

					.cont2 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							font-size: 26rpx;
							color: rgba(34, 34, 34, 0.5);
							line-height: 26rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							view {
								margin-top: 10px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}

					.but {
						margin: 20rpx 0 0 0;
						width: 132rpx;
						height: 54rpx;
						border: 1px solid #39bf3e;
						border-radius: 28rpx;
						font-size: 26rpx;
						color: #39bf3e;
						text-align: center;
						letter-spacing: 0;
						font-weight: 500;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.contI {
				height: calc(100vh - 50px);
				color: #222;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>